<template>
    <div class="classift">
        <div class="flLeft">
            <ul>
                <li v-for="(item, index) in arrSp" @click="yanse(index)">
                    <RouterLink :to="{
                        name: 'classify_sp',
                        query: {
                            id: item.id
                        }
                    }">
                    <span :class="index==suoyin?'bianse1':''">{{ item.name }}</span>
                    </RouterLink>
                </li>
            </ul>
        </div>
        <div class="flRight">     
            <RouterView></RouterView>
        </div>
    </div>

</template>
<script setup lang='ts'>
import { ref } from "vue";
let arrSp = [
    {
        id: "1",
        name: "品牌墙"
    },
    {
        id: "2",
        name: "美容彩妆"
    },
    {
        id: "3",
        name: "奶粉"
    }
    ,
    {
        id: "4",
        name: "母婴专区"
    },
    {
        id: "5",
        name: "营养保健"
    },
    {
        id: "6",
        name: "数码家具"
    },
    {
        id: "8",
        name: "个人洗漱"
    },
    {
        id: "9",
        name: "奢侈品"
    },
    {
        id: "10",
        name: "服饰鞋靴"
    },
    {
        id: "11",
        name: "运动户外"
    },
    {
        id: "12",
        name: "手表配饰"
    },
    {
        id: "13",
        name: "家居生活"
    },
    {
        id: "14",
        name: "环球美食"
    },
    {
        id: "15",
        name: "考拉出品"
    },
    {
        id: "16",
        name: "海外直购"
    },
    {
        id: "17",
        name: "网易严选"
    },
]
let suoyin = ref(0)
function yanse(index) {
    suoyin.value = index
}
</script>
<style scoped>
.classift {
    margin-bottom: 0.6rem;
    font-size: 0.15rem;
    color: #757575;
    background-color: #ffffff;
    /* text-align: center; */
    display: flex;
}

.classift a {
    text-decoration: none;
    color: #757575;
}

.flLeft {
    text-align: center;
    overflow-y: scroll;
    height: 100vh;
    flex: 1;
    background-color: #ffffff;
    border-right: solid #e7e6e6 0.02rem;
}

.flLeft::-webkit-scrollbar {
    display: none;

}

.flRight {
    flex: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow-y: scroll;
    height: 100vh;
}

.flLeft li {
    height: 0.45rem;
    line-height: 0.45rem;
    margin-top: 0.1rem;
}


.bianse1 {
    height: 100%;
    width: 100%;
    padding: 0.04rem 0.08rem;
    color: #ffffff;
    background-color: #f53f3f;
    border-radius: 0.2rem;
}
</style>